<template>
  <div class="app">
    <AppHeader header_title="父传子标题"></AppHeader>
    <app-content content_banner="内容banner"></app-content>
    <app-footer footer_title="页脚标题"></app-footer>
  </div>
  
  <div class="counter">
    <h2>当前计数：{{ counter }}</h2>
    <sub-counter @sub="subBtnClick"></sub-counter>
    <add-counter @add="addBtnClick"></add-counter>
  </div>


  <div class="tab-control">
    <tab-control :contents="['衣服', '鞋子', '裤子']" @tab-item-click="tabItemClick"/>
    <h1>{{ pageContents[currentIndex] }}</h1>
  </div>
</template>

<script>
  import AppHeader from './components/AppHeader.vue';
  import AppContent from './components/AppContent.vue';
  import AppFooter from './components/AppFooter.vue';
  import SubCounter from './components/SubCounter.vue';
  import AddCounter from './components/AddCounter.vue';
  import TabControl from './components/TabControl.vue';

  export default {
    components: {
      AppHeader,
      AppContent,
      AppFooter,
      SubCounter,
      AddCounter,
      TabControl
    },
    data() {
      return {
        counter: 0,
        pageContents: ["衣服列表", "鞋子列表", "裤子列表"],
        currentIndex: 0,
      }
    },
    methods: {
      subBtnClick(count) {
        this.counter -= count
        this.counter = this.counter <= 0 ? 0 : this.counter
      },
      addBtnClick(count) {
        this.counter += count
      },
      tabItemClick(index) {
        this.currentIndex = index
      }
    }
  }

</script>